import 'package:flutter/material.dart';
import "package:get/get.dart";
import 'package:osg/controllers/http.dart';


class TalkInfo extends StatefulWidget {
  const TalkInfo({super.key});

  @override
  State<TalkInfo> createState() => _SettingPageState();
}
    RxList articleData = [].obs;

class _SettingPageState extends State<TalkInfo> {

    String? id = Get.parameters['id'];

    RxMap info = {}.obs;
    RxList join = [].obs;

  getInfo(){
     Get.find<HTTPS>().getData('/bbs/topic_article', {
        "topic_id":'$id'
      }).then((res){
        if(res!=null){
          articleData.value = res;
        }
      });
  }
getTopic(){
  Get.find<HTTPS>().getData('/bbs/topicInfo', {
        "topic_id":'$id'
      }).then((res){
        if(res!=null){
          info.value = res;
          join.value=res['join'];
        }
      });
}
  

  @override
  void initState() {
    super.initState();
     WidgetsBinding.instance.addPostFrameCallback((_) {
      getInfo();
      getTopic();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
      Stack(
        children: [
          Image.asset(
            height: 200,
            'static/talkbg.png',
            fit: BoxFit.fill,
          ),
          Positioned(
            left:8.0,
            top: 20,
            child: IconButton(
              onPressed: () {
                Get.back();
                print('object');
              },
              icon: Image.asset(
                'static/images/bback.png',
                width: 22,
                fit: BoxFit.fitWidth,
              ),
            ),
          ),
          Positioned(
            left: 15,
            right: 15,
            top: 65,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                  Obx(()=>
                   Text(
                  '#${info['topic_title']}',
                  style: TextStyle(fontSize: 18, color: Color(0XFFFFFFFF)),
                )
                  )
               ,
                SizedBox(height: 10,),

                Obx(()=>  
                  Row(
                  children: [
                    if(join.isNotEmpty&&join[0].isNotEmpty)
                    CircleAvatar(
                        radius: 9,
                        backgroundImage: NetworkImage('${join[0]['headimg']}')),
                    if(join.isNotEmpty&&join[1].isNotEmpty)

                    Container(
                      transform: Matrix4.translationValues(-4, 0, 0),
                      child: CircleAvatar(
                          radius: 9,
                            backgroundImage: NetworkImage('${join[1]['headimg']}')),
                    ),
                    if(join.isNotEmpty&&join[2].isNotEmpty)

                    Container(
                      transform: Matrix4.translationValues(-8, 0, 0),
                      child: CircleAvatar(
                          radius: 9,
                           backgroundImage: NetworkImage('${join[2]['headimg']}')),

                    ),
                    Text(
                      '参与了此话题',
                      style: TextStyle(color: Color(0XFFFFFFFF), fontSize: 12),
                    )
                  ],
                )
                )
                ,

                SizedBox(height: 20,),
              
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Obx(()=>
                    Text(
                      '${info['count']} 条内容 | ${info['follow']} 关注',
                      style: TextStyle(fontSize: 12, color: Color(0XFFFFFFFF)),
                    )
                    )
                    ,
                    Obx(()=>
                    info['is_follow']==false?
                    GestureDetector(
                      onTap: (){
                        Get.find<HTTPS>().postData('/bbs/followTopic', {
                          "follow_topic_id":'$id'
                        }).then((res){
                          if(res!=null){
                            Get.find<HTTPS>().showTost('关注成功');
                              info['is_follow']=true;
                          }
                        });
                      },
                      child:Container(
                      width: 60,
                      height: 24,
                      alignment: Alignment.center,
                      decoration: BoxDecoration(
                          color: Color(0XFFFFFFFF),
                          borderRadius: BorderRadius.circular(24)),
                      child: Text(
                        '关注',
                        style: TextStyle(fontSize: 12),
                      ),
                    ) ,
                    )
                    :Container(
                      width: 60,
                      height: 24,
                      alignment: Alignment.center,
                      decoration: BoxDecoration(
                          color: Color(0XFFFFFFFF),
                          borderRadius: BorderRadius.circular(24)),
                      child: Text(
                        '已关注',
                        style: TextStyle(fontSize: 12),
                      ),
                    )
                    )
                    
                  ],
                ),
              ],
            ),
          ),
          Positioned(
            left: 0,
            right: 0,
            top: 188,
            child: Container(
              height: 12,
              decoration: BoxDecoration(
                  color: Color(0XFFFFFFFF),
                  borderRadius: BorderRadius.only(topLeft:Radius.circular(12),topRight: Radius.circular(12))
             ),
            ),
          ),
        ],
      ),

    Expanded(
      child: ListView(
        children: [
         NotificationLayout(),
          // 更多列表项...
        ],
      ),
    ),
      

    ]));
  }
}

class NotificationLayout extends StatelessWidget {
  const NotificationLayout({super.key});

  @override
  Widget build(BuildContext context) {
    final width = MediaQuery.of(context).size.width / 3.4;
    return Obx(() => Column(
          children: [
            for (int i = 0; i < articleData.length; i++)
              Column(
                children: [
                  Container(
                    margin: EdgeInsets.only(left: 15, right: 15, top: 20),
                    child: GestureDetector(
                      onTap: () => {
                        Get.toNamed(
                            '/talk/deatil?article_id=${articleData[i]['id']}&is_up=${articleData[i]['is_up']}&is_down=${articleData[i]['is_down']}&down_count=${articleData[i]['down_count']}&up_count=${articleData[i]['up_count']}')
                      },
                      child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Row(
                              children: [
                                CircleAvatar(
                                  radius: 24,
                                  backgroundImage: NetworkImage('${articleData[i]['headimg']}'),
                                  // child: Image.network(
                                  //     '${articleData[i]['headimg']}',
                                  //     errorBuilder:
                                  //         (context, error, stackTrace) {
                                  //   return SizedBox(
                                  //     width: 48,
                                  //   );
                                  // }),
                                ),
                                SizedBox(width: 8),
                                Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    Text(
                                      '${articleData[i]['name']}',
                                      style: TextStyle(
                                          fontSize: 16,
                                          fontWeight: FontWeight.bold),
                                    ),
                                    SizedBox(height: 4),
                                    Text(
                                      '${articleData[i]['time']}',
                                      style: TextStyle(
                                          fontSize: 12, color: Colors.grey),
                                    ),
                                  ],
                                ),
                              ],
                            ),
                            SizedBox(height: 10),
                            Text(
                              '${articleData[i]['text']}',
                              style: TextStyle(
                                  fontSize: 14, color: Color(0xff333333)),
                            ),
                            SizedBox(height: 10),
                            Wrap(
                              spacing: 5,
                              runSpacing: 5,
                              children: [
                                for (var item in articleData[i]['images'])
                                  ClipRRect(
                                      borderRadius: BorderRadius.circular(5),
                                      child: Image.network(item,
                                          width: width,
                                          height: width,
                                          fit: BoxFit.fill, errorBuilder:
                                              (context, error, stackTrace) {
                                        return SizedBox(
                                          width: width,
                                          height: width,
                                        );
                                      })),
                              ],
                            ),
                            Container(
                              margin: EdgeInsets.only(top: 10, bottom: 10),
                              padding: EdgeInsets.only(
                                  top: 1, bottom: 1, right: 10, left: 10),
                              decoration: BoxDecoration(
                                color: Color(0xffF3EEFF),
                                borderRadius: BorderRadius.circular(10.0),
                              ),
                              child: Text(
                                '# ${articleData[i]['topic']}',
                                style: TextStyle(fontSize: 12),
                              ),
                            ),
                          ]),
                    ),
                  ),
                  Container(
                    margin: EdgeInsets.only(left: 15, right: 15),
                    child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Row(
                            children: [
                              Image.asset(
                                'static/images/share.png',
                                width: 15,
                              ),
                              Text(''),
                            ],
                          ),
                          // if (!articleData[i]['is_down'] &&
                          //     !articleData[i]['is_up'])
                          //   Row(
                          //     children: [
                          //       GestureDetector(
                          //         onTap: () {
                          //           Get.find<HTTPS>().postData('/bbs/updown', {
                          //             "article_id": articleData[i]['id'],
                          //             "type": 1,
                          //           }).then((res) {
                          //             if (res != null) {
                          //               articleData[i]['is_up'] = res['is_up'];
                          //               articleData[i]['up_count'] =
                          //                   res['up_count'];
                          //               articleData.refresh();
                          //             }
                          //           });
                          //         },
                          //         child: Row(
                          //           children: [
                          //             Image.asset(
                          //               'static/images/hongxin.png',
                          //               width: 15,
                          //             ),
                          //             Text('${articleData[i]['up_count']}'),
                          //           ],
                          //         ),
                          //       ),
                          //       SizedBox(
                          //         width: 70,
                          //       ),
                          //       GestureDetector(
                          //         onTap: () {
                          //           Get.find<HTTPS>().postData('/bbs/updown', {
                          //             "article_id": articleData[i]['id'],
                          //             "type": 2,
                          //           }).then((res) {
                          //             if (res != null) {
                          //               articleData[i]['is_down'] =
                          //                   res['is_down'];
                          //               articleData[i]['down_count'] =
                          //                   res['down_count'];
                          //               articleData.refresh();
                          //             }
                          //           });
                          //         },
                          //         child: Row(
                          //           children: [
                          //             Image.asset(
                          //               articleData[i]['is_down']
                          //                   ? 'static/images/liekai.png'
                          //                   : 'static/images/aixin.png',
                          //               width: 15,
                          //             ),
                          //             Text('${articleData[i]['down_count']}'),
                          //           ],
                          //         ),
                          //       ),
                          //     ],
                          //   ),

                            GestureDetector(
                              onTap: () {
                                if(articleData[i]['is_down']==true){
                                  Get.find<HTTPS>().showTost('请先取消踩');
                                  return;
                                }
                                if(articleData[i]['is_up'] == false){
                                Get.find<HTTPS>().postData('/bbs/updown', {
                                  "article_id": articleData[i]['id'],
                                  "type": 1,
                                }).then((res) {
                                  if (res != null) {
                                    articleData[i]['is_up'] = res['is_up'];
                                    articleData[i]['up_count'] =
                                        res['up_count'];
                                    articleData.refresh();
                                  }
                                });
                                }else{

                                Get.find<HTTPS>().postData('/bbs/unUpdown', {
                                  "article_id": articleData[i]['id'],
                                  "type": 1,
                                }).then((res) {
                                  if (res != null) {
                                    articleData[i]['is_up'] = res['is_up'];
                                    articleData[i]['up_count'] =
                                        res['up_count'];
                                    articleData.refresh();
                                  }
                                });
                                }
                              },
                              child: Row(
                                children: [
                                  Image.asset(
                                    articleData[i]['is_up']?
                                    'static/images/hongxin.png':
                                    'static/images/aixin.png',
                                    width: 15,
                                  ),
                                  Text('${articleData[i]['up_count']}'),
                                ],
                              ),
                            ),



                            GestureDetector(
                              onTap: () {
                                if(articleData[i]['is_up']==true){
                                  Get.find<HTTPS>().showTost('请先取消赞');
                                  return;
                                }
                                if(articleData[i]['is_down'] == true){
                                    Get.find<HTTPS>().postData('/bbs/unUpdown', {
                                  "article_id": articleData[i]['id'],
                                  "type": 2,
                                }).then((res) {
                                    if (res != null) {
                                      articleData[i]['is_down'] = res['is_down'];
                                      articleData[i]['down_count'] =
                                          res['down_count'];
                                      articleData.refresh();
                                    }
                                  });
                                }else{
                                  Get.find<HTTPS>().postData('/bbs/updown', {
                                    "article_id": articleData[i]['id'],
                                    "type": 2,
                                  }).then((res) {
                                    if (res != null) {
                                      articleData[i]['is_down'] = res['is_down'];
                                      articleData[i]['down_count'] =
                                          res['down_count'];
                                      articleData.refresh();
                                    }
                                  });
                                }
                               
                              },
                              child: Row(
                                children: [
                                  Image.asset(
                                     'static/images/liekai.png',
                                    width: 15,
                                  ),
                                  Text('${articleData[i]['down_count']}'),
                                ],
                              ),
                            ),




                          GestureDetector(
                            onTap: () {
                              Get.toNamed(
                            '/talk/deatil?article_id=${articleData[i]['id']}&is_up=${articleData[i]['is_up']}&is_down=${articleData[i]['is_down']}&down_count=${articleData[i]['down_count']}&up_count=${articleData[i]['up_count']}');
                      
                              // Get.find<HTTPS>().postData('/bbs/updown', {
                              //   "article_id": articleData[i]['id'],
                              //   "type": 1,
                              // });
                            },
                            child: Row(
                              children: [
                                Image.asset(
                                     'static/images/chat.png',
                                  width: 15,
                                ),
                                Text('${articleData[i]['comment_count']}'),
                              ],
                            ),
                          ),
                        ]),
                  ),
                  Container(
                    margin: EdgeInsets.only(top: 10),
                    height: 10,
                    color: Color(0xfff3f3f3),
                  )
                ],
              ),
          ],
        ));
  }
}

// class NotificationLayout extends StatelessWidget {
//   const NotificationLayout({super.key});

//   @override
//   Widget build(BuildContext context) {
//     final width = MediaQuery.of(context).size.width / 3.4;
//     return Column(
//       children: [
//         Container(
//           margin: EdgeInsets.only(left: 15, right: 15),
//           child:
//               Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
//             Row(
//               children: [
//                 CircleAvatar(
//                   radius: 24,
//                   backgroundColor: Colors.blue
//                       .shade400, // Using a darker blue for better visibility
//                   child: Icon(
//                     Icons
//                         .mic, // Changed to mic icon as it represents a speaker or notification related to speech/broadcast
//                     size: 20,
//                     color: Colors.white,
//                   ),
//                 ),
//                 SizedBox(width: 8),
//                 Column(
//                   crossAxisAlignment: CrossAxisAlignment.start,
//                   children: [
//                     Text(
//                       '主播昵称呀',
//                       style:
//                           TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
//                     ),
//                     SizedBox(height: 4),
//                     Text(
//                       '2分钟前',
//                       style: TextStyle(fontSize: 12, color: Colors.grey),
//                     ),
//                   ],
//                 ),
//               ],
//             ),
//             SizedBox(height: 10),
//             Text(
//               '策划人要拥有的14张推广排期要拥有的14张推广排要拥有的14张推广排要拥有的14张推广排要拥有的14张推广排要拥有的14张推广排表！高质量！',
//               style: TextStyle(fontSize: 14, color: Color(0xff333333)),
//             ),
//             SizedBox(height: 10),
//             Wrap(
//               spacing: 5,
//               runSpacing: 5,
//               children: [
//                 ClipRRect(
//                     borderRadius: BorderRadius.circular(5),
//                     child: Image.asset(
//                       'static/aaa.png',
//                       width: width,
//                     )),
//                 ClipRRect(
//                     borderRadius: BorderRadius.circular(5),
//                     child: Image.asset(
//                       'static/aaa.png',
//                       width: width,
//                     )),
//                 ClipRRect(
//                     borderRadius: BorderRadius.circular(5),
//                     child: Image.asset(
//                       'static/aaa.png',
//                       width: width,
//                     )),
//                 ClipRRect(
//                     borderRadius: BorderRadius.circular(5),
//                     child: Image.asset(
//                       'static/aaa.png',
//                       width: width,
//                     )),
//               ],
//             ),
//             Container(
//               margin: EdgeInsets.only(top: 10, bottom: 10),
//               padding: EdgeInsets.only(top: 1, bottom: 1, right: 10, left: 10),
//               decoration: BoxDecoration(
//                 color: Color(0xffF3EEFF),
//                 borderRadius: BorderRadius.circular(10.0),
//               ),
//               child: Text(
//                 '# NFT生存法则',
//                 style: TextStyle(fontSize: 12),
//               ),
//             ),
//             Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
//               Image.asset(
//                 'static/images/share.png',
//                 width: 15,
//               ),
//               Container(
//                 child: Row(
//                   children: [
//                     Image.asset(
//                       'static/images/aixin.png',
//                       width: 15,
//                     ),
//                     SizedBox(width: 30),
//                     Image.asset(
//                       'static/images/chat.png',
//                       width: 15,
//                     ),
//                   ],
//                 ),
//               )
//             ]),
//           ]),
//         ),
//         Container(
//           margin: EdgeInsets.only(top: 10),
//           height: 10,
//           color: Color(0xfff3f3f3),
//         )
//       ],
//     );
//   }
// }